<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="buttons">
  <a href="https://www.jianshu.com/p/918c63045bc3" target="_blank">https://www.jianshu.com/p/918c63045bc3</a>
  <br/>
  <button id="get">get</button>
  <button id="get_dataParam">get_dataParam</button>
  <button id="get_timeout">get_timeout</button>
  <button id="get_document">get_document</button>
  <button id="get_exception">get_exception</button>
  <br/>
  <button id="post_dataParam">post_dataParam</button>
  <button id="post_formDataParam">post_formDataParam</button>
  <button id="post_body">post_body</button>
  <button id="post_body_list">post_body_list</button>
</div>
<br/>
<div>
  <label for="file">选择文件,可多选:</label>
  <input id="file" type="file" multiple>
  <button id="upload">upload</button>
</div>
<br/>
<div>
  <label for="file">文件分块传输:</label>
  <input id="bidFile" type="file">
  <button id="uploadFile">uploadFile</button>
</div>
<script src="http.js"></script>
<script>
  document.getElementById('buttons').addEventListener('click', function (e) {
    let url = 'http://127.0.0.1:80/servlet/ajaxs';
    const id = e.target.id;
    if (id === 'get') {
      // http.get(url, {name: "哈哈", age: "12"}, function (data) {
      //     console.info(data)
      // });
      fetch(url + '?name=哈哈&age=12').then(res => res.json()).then(data => {
        console.log(data);
      });
    }
    if (id === 'get_dataParam') {
      http.request({
        url: url,
        //data: 'name=哈哈&age=12',
        data: {name: '哈哈', age: 12},
        success: function (result, status, xhr) {
          console.log(result, '\n status:', status, xhr);
          debugger;
        }
      });
    }
    if (id === 'get_timeout') {
      http.request({
        url: url,
        timeout: 1000
      });
    }
    if (id === 'get_document') {
      // http.request 是针对这个 api(http://88.128.18.144:8081/api/) 封装的,这里请求另外一个接口,不能使用 http.request
      http.ajax({
        url: 'http://127.0.0.1:80/servlet/ajaxs',
        dataType: 'document',
        success: function (result, status, xhr) {
          console.log(result, '\n status:', status, xhr);
          debugger;
        }
      });
    }
    if (id === 'get_exception') {
      http.get(url);
    }

    // =============================================================================================================

    if (id === 'post_dataParam') {
      http.post(url, {name: '哈哈', age: 12}, (result, status, xhr) => {
        console.log('进行业务操作');
      })
    }
    if (id === 'post_formDataParam') {
      // 传 FormData 类型参数,不要设置 contentType,浏览器会自动设置 contentType 为 'multipart/form-data'
      let formData = new FormData();
      formData.append('name', '哈哈');
      formData.append('age', '123');
      http.request({
        url: url,
        type: 'POST',
        data: formData,
        success: function (result, status, xhr) {
          console.log('进行业务操作');
        }
      });
    }
    if (id === 'post_body') {
      http.postBody(url, JSON.stringify({
        name: '哈哈',
        age: 12,
        birthday: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
        hobbies: ['a', 'b', 'c']
      }), (result, status, xhr) => {
        console.log('进行业务操作');
      });
    }
    if (id === 'post_body_list') {
      http.postBody(url, JSON.stringify(['a', 'b', 'c']), (result, status, xhr) => {
        console.log('进行业务操作');
      });
    }
  });

  document.getElementById('upload').addEventListener('click', function () {
    let files = document.getElementById('file').files;
    if (files.length === 0) {
      console.log('没有选择文件');
      return;
    }
    let form = new FormData(); // FormData 对象
    Array.from(files).forEach((file, index) => {
      form.append(index, file); // 文件对象
    });
    http.ajax({
      url: 'http://127.0.0.1:80/servlet/ajaxs?directory=test',
      type: 'POST',
      data: form,
      success: function (result, status, xhr) {
        console.log('文件上传成功', result.data);
      }
    });
  });

  const LENGTH = 1024 * 100; // 100kb
  document.getElementById('uploadFile').addEventListener('click', function () {
    let file = document.getElementById('bidFile').files[0];
    if (!file) {
      console.log('没有选择文件');
      return;
    }
    let start = 0, end = LENGTH;
    while (start < file.size) {
      let blob = file.slice(start, end);
      let form = new FormData();
      form.append('blob', blob);
      http.ajax({
        url: 'http://127.0.0.1:80/servlet/ajaxs?directory=test',
        type: 'POST',
        data: form,
        success: function (result, status, xhr) {
          console.log('文件分块上传', result.data);
        }
      });
      start = end;
      end = start + LENGTH;
    }
  });
</script>
</body>
</html>